<template>
  <div id="box">
    <div style="margin-right: 120px;">
      <el-card class="box-card" style="display: inline-block;">
        <div class="card-header">
          <div>
            <el-icon>
              <Grid style="color: #40c9c6;" />
            </el-icon>
          </div>
          <div>
            <span style="color:#989A9A">
              <strong>商品数量</strong>
            </span>
            <div>
              <strong style="color:#677085">{{dataList.goodsCount}}</strong>
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="box-card">
        <div class="card-header">
          <div>
            <el-icon style="color:#45AAF8">
              <ChatDotSquare />
            </el-icon>
          </div>
          <div>
            <span style="color:#989A9A">
              <strong>未发货单</strong>
            </span>
            <div>
              <strong style="color:#677085">{{dataList.waitStockCount}}</strong>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="echart" ref="mychart" :style="{ width: '70%', height: '400px ' }"/>
    <div ref="make" :style="{ width: '33.3%', height: '500px ' }"/>
    <div ref="region" :style="{ width: '33.3%', height: '500px ' }"/>
    <div ref="channel" :style="{ width: '33.3%', height: '500px ' }"/>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { get } from "@/utlis/http";
import { Grid, ChatDotSquare } from "@element-plus/icons-vue";
export default {
  components: {
    Grid,
    ChatDotSquare,
  },
  setup() {
    return {
      Grid,
      ChatDotSquare,
    };
  },
  data() {
    return {
      dataList: "",
    };
  },
  created() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      let data = {
        _gp: "admin.dashboard",
        _mt: "integral",
      };
      get(data).then((res) => {
        let { data, errno } = res.data;
        if (200 == errno) {
          this.dataList = data;
          this.orderForm(); //七日订单数
          this.tradingVolume(); //七日成交金额
          this.regionDistribution(); //订单地区发布
          this.channelDistribution(); //订单渠道分布
        }
      });
    },
    //七日订单数
    orderForm() {
      var chartDom = this.$refs.mychart;
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        legend: {
          data: ["订单数"],
          left: "right",
        },
        title: {
          text: "7日订单",
          subtext: "订单数",
        },
        xAxis: {
          type: "category",
          data: this.dataList.daysOrder[0],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单数",
            data: this.dataList.daysOrder[1],
            type: "bar",
            color: "#00C7FF",
          },
        ],
      };
      option && myChart.setOption(option);
    },
    //七日成交金额
    tradingVolume() {
      var chartDom = this.$refs.make;
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        legend: {
          data: ["订单数"],
          left: "right",
        },
        title: {
          text: "7日成交金额",
          subtext: "订单数",
        },
        xAxis: {
          type: "category",
          data: this.dataList.daysSum[0],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单数",
            data: this.dataList.daysSum[1],
            type: "line",
            color: "#00C7FF",
          },
        ],
      };
      option && myChart.setOption(option);
    },
    //订单地区发布
    regionDistribution() {
      var chartDom = this.$refs.region;
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: "订单地区分布",
          left: "left",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          title: "地区分布",
          left: "right",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: this.dataList.area,
          },
        ],
      };
      option && myChart.setOption(option);
    },
    // 订单渠道分布
    channelDistribution() {
      var chartDom = this.$refs.channel;
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: "订单渠道分布",
          left: "left",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          title: "渠道分布",
          left: "right",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: this.dataList.channel,
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.box-card {
  width: 250px;
  height: 80px;
  margin-bottom: 20px;
  .card-header {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
}
.el-icon {
  font-size: 40px;
}
#box {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  #box > div{
    display: inline-block;
  }
}
</style>
